<template>
	<view class="getCode">
		<view class="title">
			请输入手机{{phone}}收到的短信验证码
		</view>
		<view class="inputBox">
			<view class="left">
				验证码
			</view>
			<input type="text" v-model="code" placeholder="短信验证码" />
			<view class="times" >
				<text v-if="time<60">{{time}}s</text>
			</view>
		</view>
		<view class="sendAgain" @tap="sendAgain">
			重新发送
		</view>
		<view class="submitBtn" :class="{disabled:code == ''}" @tap="submit">
			验证信息
		</view>
	</view>
</template>

<script>
	export default{
		data() {
			return {
				code: "",
				time:60,
				timer:"",
				phone:"",
				data:{}
			}
		},
		onLoad(e) {
			this.data = JSON.parse(decodeURIComponent(e.params))
			this.phone = this.data.phone.substr(0, 3) + '****' + this.data.phone.substr(7);
			this.countDown()
			this.getCode()
		},
		methods:{
			countDown(){
				this.timer = setInterval(()=>{
					this.time--;
					if(this.time == 0){
						clearInterval(this.timer)
						this.time = 60
					}
				},1000)
			},
			sendAgain(){
				if(this.time == 60){
					this.countDown()	
				}
				
			},
			getCode(){
				let data = {
					type: 4,
					mobile: this.data.phone
				}
				this.$http.post('/api/v1.0/sendMessage', data, res => {
					if (res.data.status == '000000') {
						uni.showToast({
							title: '验证码已下发，请注意查收',
							icon: 'none'
						})
					}else{
						uni.showToast({
							title: '请稍后再试',
							icon: 'none'
						})
					}
				})
			},
			submit(){
				let data  = {
					accountId:uni.getStorageSync('buyerAccountId'),
					bankCard:this.data.bankCard,
					bankUserName:this.data.name,
					code:this.code,
					idCard:this.data.idCard,
					mobile:this.data.phone
				}
				this.$http.post('/api/v1.0/user/bindBank',data,res=>{
					if(res.data.status == '000000'){
						uni.showToast({
							title: '绑卡成功'
						})
						uni.navigateBack({
							delta: 2
						})
					}else{
						uni.showToast({
							title: res.data.message,
							icon:"none"
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.getCode{
		width: 616upx;
		margin: 0 auto;
		.title{
			color: #808080;
			font-size: 24upx;
			margin-top: 66upx;
		}
		.inputBox{
			margin-top: 40upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 28upx;
			border-bottom: 1upx solid #e6e6e6;
			line-height: 80upx;
			.left{
				color: #333;
			}
			input{
				margin-left: -50upx;
			}
			.times{
				color: #b3b3b3;
			}
		}
		.sendAgain{
			text-align: right;
			font-size: 24upx;
			color: #4d4d4d;
			margin-top: 40upx;
		}
		.submitBtn{
			width:616upx;
			height:104upx;
			background:linear-gradient(0deg,rgba(227,67,57,1),rgba(249,98,58,1));
			border-radius:20upx;
			color: #FFFFFF;
			font-size: 40upx;
			text-align: center;
			line-height: 104upx;
			margin-top: 50upx;
			&.disabled{
				opacity:0.5;
			}
		}
		
	}
</style>
